<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>元素属性操作</title>
		<!--元素属性操作：元素  固定属性  附加属性
		                    固定属性：<a href="#"></a>
							附加属性: <input type="text" checked>
		attr()         有参----1个参数  功能：获取匹配元素集合中的第一个元素的指定属性值
		                                    理解：通过属性获取属性值
		                       2个参数  功能：【设置】匹配元素集合中所有元素的指定属性值
							                 理解：通过属性和属性值 设置元素样式
		removeAttr()    有参----功能呢：移出匹配元素集合中所有元素的指定属性
		                  理解：移除属性---元素效果消失
		
		prop() 
		remocePorp()
		 
		 -->
		<script src="../js/jquery-1.11.1.js"></script>
		
	</head>
	<body>
		<h1>attr函数与removeAttr函数使用</h1>
		<img src="../img/2.gif" alt="哆啦A梦"  id="myImg">
		<br>
		<button id="getAttrBtn">获取属性</button>
		<button id="setAttrBtn">设置属性</button>
		<button id="removeAttrBtn">删除属性</button>
		<div id="output">显示文本</div>
		<h2>练习 attr函数</h2>
		<button class="gbn">点击</button>
		<button class="tand">点击1</button>
		<button class="video">点击2</button>
		<div class="resures"></div>
		<video src="../oceans-clip.mp4" controls></video>
		<a href="https://www.douyin.com/">百度一下</a>
		<script>
			//抓到 getAttrBtn 按钮  点击  attr获取src属性 变量接收 output显示文本：img的src路径是：+变量
			$("#getAttrBtn").click(function(){
			  var wnd=$("img").attr("src");
			  $("#output").html("img的src路径是："+wnd);
			});
			
			$("#setAttrBtn").click(function(){
			  $("img").attr("src","../img/1.gif");
			  $("#output").html("img的src路径是：../img/1.gif");
			});
			//移除属性 
			$("#removeAttrBtn").click(function(){
				$("img").removeAttr("src");
				$("output").text("图片元素的src属性移除");
			});
			
			$(".gbn").click(function(){
				$("a").attr("href","https://www.baidu.com/");
			});
			$(".tand").click(function(){
				$("a").attr("href","");
			}); 
		   $(".video").click(function(){
			var	vivd=$("video").attr("src");
				 $(".resures").text("视频的src路径是："+vivd);
				 $("video").attr("autoplay","autoplay");
			 }); 
		</script>
	</body>
</html>